<template>
  <view :data-theme="theme">
    <view class="seckill_header">
      <!-- #ifdef MP || APP-PLUS-->
      <view class='cart_nav'>
        <nav-bar @getNavH='getNavH' iconColor='#fff' :isBackgroundColor="false">
          <view slot='default' class="">
            <image class="seckill_title" src="../static/images/seckill_title.png" mode=""></image>
          </view>
        </nav-bar>
      </view>
      <!--  #endif -->
      <view class="scroll_box" :style='{width: mainWidth+"px"}'>
        <scroll-view scroll-x="true" scroll-with-animation style="white-space: nowrap; vertical-align: middle;"
                     show-scrollbar="false" :scroll-left="tabLeft">
          <!-- #ifdef APP-PLUS -->
          <!-- <view class="" :style="'width:100%;' + 'height:'+sysHeight"></view> -->
          <!-- #endif -->
          <view class="scroll_box_item">
            <view class="scroll_item" v-for="(item,index) in timeLine" :key="index"
                  @click="checkSeckill(index,item)">
              <view class="acea-row row-column row-center row-middle" :style='"width:"+isWidth+"px;"'
                    :id='"sort"+index'>
                <text class="header_time f-w-700"
                      :class="active == index ? 'active' : ''">{{ item.startTime }}
                </text>
                <text class="header_day f-w-700"
                      :class="active == index ? 'active_day' : ''">{{ item.status | timeStatusFilter }}
                </text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
    <view class="seckill_box" :style='{ marginTop: listMarTop + "rpx"}'>
      <view class="seckill_desc acea-row row-between row-middle">
        <view class="acea-row row-column">
          <text class="seckill_name"></text>
        </view>
        <view v-if="status>0" class="acea-row datatimeBox">
          <text class="f-s-24 text-right mr10">{{ desc }}</text>
          <view class="count_down">
            <countDown :is-day="true" :tip-text="' '" :day-text="' '" :hour-text="' : '"
                       :minute-text="' : '" :second-text="' '" :datatime="datatime" :isCol="false"
                       :bgColor="bgColor"></countDown>
          </view>
        </view>
      </view>
      <!-- 秒杀商品列表 -->
      <seckill-list :seckillList="seckillList" :loading="loading" :loadTitle="loadTitle"
                    :status="status" :datatime="datatime"></seckill-list>
    </view>
  </view>
</template>

<script>
import {
  getSeckillHeaderApi,
  getSeckillListApi
} from '../../../api/activity.js';
import countDown from "@/components/countDown";
import navBar from '@/components/navBar';
import emptyPage from '@/components/emptyPage.vue'
import SeckillList from "../components/SeckillList";
import {
  setThemeColor
} from '@/utils/setTheme.js'

let app = getApp();
let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
export default {
  components: {
    countDown,
    navBar,
    emptyPage,
    SeckillList
  },
  created() {
    var that = this
    // 获取设备宽度
    uni.getSystemInfo({
      success(e) {
        that.mainWidth = e.windowWidth
        that.isWidth = (e.windowWidth - 65) / 4
      }
    })
  },
  data() {
    return {
      listMarTop: 0,
      showSkeleton: true, //骨架屏显示隐藏
      isNodes: 0, //控制什么时候开始抓取元素节点,只要数值改变就重新抓取
      circular: true,
      autoplay: true,
      interval: 500,
      topImage: '',
      seckillList: [],
      timeList: [],
      active: 0,
      scrollLeft: 0,
      status: 1,
      countDownHour: "00",
      countDownMinute: "00",
      countDownSecond: "00",
      page: 1,
      limit: 10,
      loading: true,
      loadend: false,
      timeLine: [],
      returnShow: true,
      navH: '',
      theme: app.globalData.theme,
      isLeft: 0,
      mainWidth: 0,
      tabLeft: 0,
      isWidth: 0,
      info: {},
      desc: '',
      datatime: 0,
      bgColor: {
        'bgColor': '',
        'Color': '#fff',
        'width': '36rpx',
        'timeTxtwidth': '16rpx',
        'isDay': true
      },
      marTop: 0,
      activeTime: {},
      loadTitle: '',
      sysHeight: sysHeight
    }
  },
  onLoad() {
    this.bgColor.bgColor = setThemeColor();
    setTimeout(() => {
      this.isNodes++;
    }, 500);
    var pages = getCurrentPages();
    this.returnShow = pages.length === 1 ? false : true;
    // #ifdef H5
    this.navH = app.globalData.navHeight - 18;
    // #endif
    this.getSeckillConfig();
  },
  methods: {
    getNavH(marTop) {
      this.marTop = marTop;
      this.$nextTick(function () {
        const query = uni.createSelectorQuery().in(this);
        query.select('.scroll_box_item').boundingClientRect(data => {
          // #ifdef MP
          this.listMarTop = this.marTop + data.height * 2 + 38 + 38
          // #endif
          // #ifdef APP-PLUS
          this.listMarTop = this.marTop + data.height * 2 + 30 + 30
          // #endif
        }).exec();
      });
    },
    checkSeckill(index, item) {
      let that = this;
      that.active = index;
      that.isLeft = -(index * that.isWidth) //设置下划线位置
      that.tabLeft = (index - 2) * this.isWidth //设置下划线位置
      this.status = item.status;
      if (item.status == 1) {
        this.desc = '距本场结束';
        this.datatime = item.endTimeStamp / 1000;
      } else if (item.status == 2 || item.status == 3) {
        this.desc = '距本场开始';
        this.datatime = item.startTimeStamp / 1000;
      } else if (item.status == 0) {
        this.desc = '已结束';
      }
      that.loading = false;
      that.loadend = false;
      this.page = 1;
      this.seckillList = [];
      this.activeTime = item;
      that.getSeckillList(item);
    },
    goBack: function () {
      uni.navigateBack();
    },
    getSeckillConfig: function () {
      getSeckillHeaderApi().then(res => {
        this.timeLine = res.data;
        //找出第一个进行中的下标
        this.active = this.timeLine.length ? res.data.findIndex(item => item.status === 1 || item
            .status === 2) : 0;
        this.$nextTick(() => {
          this.tabLeft = (this.active - 2) * this.isWidth //选中的位置放在第一位
        })

        if (res.data[this.active].status == 1) {
          this.desc = '距本场结束';
          this.datatime = res.data[this.active].endTimeStamp / 1000;
          this.status = 1;
        } else if (res.data[this.active].status == 2) {
          this.desc = '距本场开始';
          this.status = 2;
          this.datatime = res.data[this.active].startTimeStamp / 1000;
        } else if (res.data[this.active].status == 0) {
          this.desc = '已结束';
          this.status = 0;
        }
        this.loading = false;
        this.loadend = false;
        this.page = 1;
        this.seckillList = [];
        let item = this.timeLine[this.active];
        this.activeTime = item;
        this.getSeckillList(this.activeTime);

      });
    },
    getSeckillList: function (item) {
      var that = this;
      var data = {
        page: that.page,
        limit: that.limit,
        date: item.date,
        startTime: item.startTime,
        endTime: item.endTime
      };
      if (that.loadend) return;
      if (that.loading) return;
      that.loadTitle = '';
      that.loading = true
      getSeckillListApi(data).then(res => {
        this.$set(this, 'page', this.page + 1);
        this.seckillList = this.seckillList.concat(res.data.list || []);
        this.loadend = this.page > res.data.totalPage;
        that.loadTitle = this.loadend ? '已全部加载' : '加载更多';
        that.loading = false;
        // #ifdef H5
        that.setShare();
        // #endif
        that.showSkeleton = false
      }).catch(err => {
        that.loading = false
      });
    },
    settimeList: function (item, index) {
      if (index !== this.active) {
        var that = this;
        this.active = index
        if (that.interval) {
          clearInterval(that.interval);
          that.interval = null
        }
        that.interval = 0,
            that.countDownHour = "00";
        that.countDownMinute = "00";
        that.countDownSecond = "00";
        that.status = that.timeLine[that.active].status;
        that.loading = false;
        that.loadend = false;
        that.page = 1;
        that.seckillList = [];
        that.activeTime = item;
        that.getSeckillList(that.activeTime);
      }
    },
    setShare: function () {
      this.$wechat.isWeixin() &&
      this.$wechat.wechatEvevt([
        "updateAppMessageShareData",
        "updateTimelineShareData",
        "onMenuShareAppMessage",
        "onMenuShareTimeline"
      ], {
        desc: this.seckillList[0].title,
        title: this.seckillList[0].title,
        link: location.href,
        imgUrl: this.seckillList[0].image
      }).then(res => {
      }).catch(err => {
        console.log(err);
      });
    },
  },
  // 滚动监听
  onPageScroll(e) {
    // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
    uni.$emit('scroll');
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    this.getSeckillList(this.activeTime);
  }
}
</script>

<style lang="scss" scoped>
.mts {
  margin-top: -56rpx;
}

.datatimeBox {
  height: 36rpx;
  line-height: 36rpx;
}

.friceIcon {
  font-size: 28rpx;
}

.futura {
  margin-top: -6rpx;
}

.seckill_header {
  background-image: url('../static/images/seckill_bg.jpg');
  background-size: cover;
  top: 0;
  left: 0;
  z-index: 99999;
  /* #ifdef H5 */
  height: 210rpx;
  padding-top: 32rpx;
  /* #endif */
  /* #ifndef H5*/
  height: 380rpx;
  /* #endif */
  position: fixed;
}

.head-menu {
  display: flex;
  align-items: center;
  height: 54rpx;
  width: 140rpx;
  background: transparent;
  border: 1px solid rgba(151, 151, 151, 0.2);
  border-radius: 27rpx;
  position: relative;

  &:after {
    content: '';
    position: absolute;
    width: 1px;
    height: 26rpx;
    background-color: #EAEAEA;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .iconfont {
    flex: 1;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
  }
}

.seckill_title {
  width: 144rpx;
  height: 36rpx;
}

.scroll_box_item {
  width: 100%;
  height: 92rpx;
}

.scroll_box {
  height: 104rpx;
  //z-index: 999999;
  //position: fixed;
  //margin-bottom: 38rpx;
  //padding: 48rpx 0 !important;
}

.scroll_item {
  display: inline-block;
  height: 92rpx;
}

.header_time {
  font-size: 36rpx;
  color: rgba(255, 255, 255, .4);
  display: inline-block;
  margin-bottom: 10rpx;
  transition: all .3s ease;
  font-family: PingFang SC-中黑体, PingFang SC;
}

.active {
  color: #fff;
}

.active_day {
  width: 108rpx;
  height: 30rpx;
  line-height: 30rpx;
  text-align: center;
  font-size: 22rpx;
  color: #fff !important;
  @include linear-gradient(theme);
  background-size: contain;
  background-repeat: no-repeat;
}

.header_day {
  font-size: 24rpx;
  color: rgba(255, 255, 255, .4);
  font-family: PingFang SC-中黑体, PingFang SC;
}

.seckill_box {
  width: 100%;
  background-color: #fff;
  left: 0;
  position: relative;
  /* #ifdef H5 */
  margin-top: 172rpx !important;
  /* #endif */
}

.seckill_desc {
  background: linear-gradient(360deg, #FFFFFF 0%, #F4F4F4 100%);
  border-radius: 24rpx 24rpx 0px 0px;
  padding: 0 24rpx;
  width: 100%;
  height: 117rpx;
  position: fixed;
  z-index: 99999;
}

.seckill_name {
  width: 222rpx;
  height: 57rpx;
  background-image: url('../static/images/miaos.png');
  background-size: contain;
  background-repeat: no-repeat;
  padding-bottom: 10rpx;
}

.seckill_discount {
  font-size: 32rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #AC6926;
}

.text-right {
  text-align: right;
}

.count_down {
}

::v-deep .is_day {
  font-size: 24rpx;
  font-weight: 500;
  color: #1B1B1B;
}
</style>